<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>License Plate</title>
    <script src="/assets/config.js"></script>
    <link rel="stylesheet" href="/node_modules/layui/dist/css/layui.css">
    <script src="/node_modules/layui/dist/layui.js"></script>
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
</head>

<body style="padding: 10px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>汽车牌照管理系统</legend>
    </fieldset>

    <div class="layui-col-md6">
        <div class="layui-panel" style="background-color: #d2d2d2;">

            <div class="layui-form-item" style="padding-top: 15px;">
                <label class="layui-form-label">车牌</label>
                <div class="layui-input-inline">
                    <input type="text" id="lp" name="lp" autocomplete="off" placeholder="云A.AH352" class="layui-input">
                </div>
                <label id="lbExits" name="lbExists" class="layui-form-label"></label>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="btnCheck" class="layui-btn layui-btn-normal">检查</button>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">牌头</label>
                <div class="layui-input-inline">
                    <input type="text" id="lpHead" name="lpHead" autocomplete="off" placeholder="云A"
                        class="layui-input">
                </div>
                <label id="lbLicense" name="lbLicense" class="layui-form-label"></label>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="btnGet" class="layui-btn layui-btn-normal">获取</button>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">车牌</label>
                <div class="layui-input-inline">
                    <input type="text" id="txtWrite" name="txtWrite" autocomplete="off" placeholder="云A.AH352"
                        class="layui-input">
                </div>
                <label id="lbWrite" name="lbWrite" class="layui-form-label"></label>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="btnWrite" class="layui-btn layui-btn-normal">写入</button>
                </div>
            </div>

        </div>

    </div>

</body>
<script>
    $(document).ready(() => {
        $("#btnWrite").on("click", () => {
            let myUrl = apiurl + "/licenseplate/write/" + $("#txtWrite").val()

            $.ajax({
                url: myUrl,
                type: 'GET',
                cache: false,
                processData: false,
                contentType: false
            }).
                done(function (res) {
                    if (res['isOK'])
                        $('#lbWrite').text('写入成功')
                    else
                        $('#lbWrite').text('写入失败')
                }).
                fail(function (res) {
                    console.log(res)
                })

        })

        $("#btnGet").on("click", () => {
            let myUrl = apiurl + "/licenseplate/get/" + $("#lpHead").val()

            console.log(myUrl)

            $.ajax({
                url: myUrl,
                type: 'GET',
                cache: false,
                processData: false,
                contentType: false
            }).
                done(function (res) {
                    $('#lbLicense').text(res['license'])
                }).
                fail(function (res) {
                    console.log(res)
                })

        })


        $("#btnCheck").on("click", () => {
            let myUrl = apiurl + "/licenseplate/exists/" + $("#lp").val()

            $.ajax({
                url: myUrl,
                type: 'GET',
                cache: false,
                processData: false,
                contentType: false
            }).
                done(function (res) {
                    if (res['isExists'])
                        $('#lbExits').text('车牌存在')
                    else
                        $('#lbExits').text('车牌不存在')
                }).
                fail(function (res) {
                    console.log(res)
                })
        })

    })

</script>

</html>